$fontSize_14: 0.8vw;
$fontSize_16: 0.9vw;
$fontSize_18: 1vw;
$fontSize_22: 1.1vw;
$fontSize_24: 1.26vw;
$fontSize_28: 1.3vw;
$fontSize_32: 1.4vw;
$fontSize_36: 1.8vw;
$fontSize_40: 2.1vw;
$fontSize_48: 2.5vw;
$fontSize_50: 2.6vw;
$fontSize_54: 2.7vw;
$fontSize_64: 3.2vw;
$fontSize_70: 3.5vw;
$fontSize_90: 4.5vw;
$fontSize_100: 5vw;
$fontSize_200: 10vw;
$f: 19.2;

body {
  background: #F5F5F5;
}

.home {
  position: relative;
  width: 100%;

  .jx {
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    text-align: right;

    img {
      max-width: 100%;
    }
  }

  .section {
    padding: 186/$f+vw 0;

    .search {
      border-radius: 99/$f+vw;
      border: 1px solid rgba(0, 0, 0, 0.10);
      background: rgba(255, 255, 255, 0.40);
      margin: 0 auto;
      width: 780/$f+vw;
      position: relative;

      input {
        width: 538/$f+vw;
        background: transparent;
        outline: none;
        border: none;
        color: #000;
        font-size: 16/$f+vw;
        height: 58/$f+vw;
        padding-left: 41/$f+vw;

        &::placeholder {
          color: #999;
          font-size: 16/$f+vw;
        }
      }

      a {
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        width: 178/$f+vw;
        height: 60/$f+vw;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        border-radius: 0px 99/$f+vw 99/$f+vw 0px;
        background: #E01C1C;
      }
    }

    .content {
      .t {
        margin: 81/$f+vw 0 30/$f+vw 0;
        color: #111;
        font-size: 36/$f+vw;
        text-align: center;
      }

      .tabs {
        display: flex;
        justify-content: center;

        .item {
          margin: 0 70/$f+vw;
          color: #111;
          font-size: 18/$f+vw;
          font-weight: 500;
          position: relative;
          padding-bottom: 9/$f+vw;
          cursor: pointer;
          transition: all 600ms;

          &::after {
            content: '';
            display: block;
            position: absolute;
            left: 0;
            bottom: 0;
            transition: all 600ms;
            width: 0;
            height: 3/$f+vw;
            border-radius: 29/$f+vw;
            background: linear-gradient(90deg, #E01C1C 0%, #FF5F5F 100%);
          }

          &.on {
            color: #E01C1C;

            &::after {
              width: 100%;
            }
          }
        }
      }

      .boxes {
        .box {
          display: none;

          &.on {
            display: block;
          }
        }

        .pros {
          grid-template-columns: repeat(5, 1fr);
          gap: 29/$f+vw 32/$f+vw;
          display: grid;
          width: 1535/$f+vw;
          margin: 44/$f+vw auto;

          .item {
            height: 279/$f+vw;
            background: lightgray;
            border-radius: 26/$f+vw;
            overflow: hidden;
            position: relative;
            border: 3/$f+vw solid transparent;
            background: #F2F2F2;
            transition: .6s;
            display: block;

            &::after {
              content: '';
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              height: 116/$f+vw;
              background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%);
              transition: .6s;
            }

            &::before {
              content: '';
              position: absolute;
              width: 100%;
              height: 116/$f+vw;
              bottom: 0;
              left: 0;
              background: linear-gradient(180deg, rgba(221, 32, 22, 0.00) 0%, rgba(224, 28, 28, 0.41) 100%);
              z-index: 1;
              opacity: 0;
              transition: .6s;
            }

            .position {
              position: absolute;
              bottom: 30/$f+vw;
              left: 12/$f+vw;
              z-index: 5;

              h1 {
                color: #FFF;
                font-size: 26.4/$f+vw;
                font-weight: 700;
                line-height: 34.32/$f+vw;
                /* 130% */
                margin: 0 0 8/$f+vw;
              }

              .lable {
                width: fit-content;
                border-radius: 4/$f+vw;
                border: 0.3px solid #FFF;
                background: rgba(255, 255, 255, 0.20);
                backdrop-filter: blur(10px);
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0 4/$f+vw;
                color: #fff;
                margin: 0 0 8.5/$f+vw;
                font-size: 8/$f+vw;
                height: 15/$f+vw;
              }

              .pick {
                display: flex;
                align-items: center;

                .red {
                  width: 4.8/$f+vw;
                  height: 4.8/$f+vw;
                  border-radius: 2/$f+vw;
                  background: #E01C1C;
                  margin: 0 5/$f+vw 0 0;
                }

                p {
                  color: #FFF;
                  font-size: 9/$f+vw;
                  font-style: normal;
                  font-weight: 400;
                  letter-spacing: 0.6px;
                }
              }
            }

            &:hover {
              border: 3/$f+vw solid #FF5B5B;
              background: #F2F2F2;

              &::after {
                opacity: 0;
              }

              &::before {
                opacity: 1;
              }
            }
          }
        }

        .news {
          width: 80vw;
          margin: 44/$f+vw auto;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 32/$f+vw;

          a {
            display: block;

            .pic {
              overflow: hidden;

              img {
                width: 100%;
                display: block;
                object-fit: cover;
                transition: all 600ms;
              }
            }

            .tag {
              border-radius: 6px;
              border: 1px solid rgba(224, 28, 28, 0.60);
              width: fit-content;
              color: rgba(224, 28, 28, 1);
              font-size: $fontSize_18;
              font-weight: 600;
              padding: 5px 10px;
              margin: 1vw 0;
            }

            .st {
              color: #111;
              font-size: 26/$f+vw;
              font-weight: 600;
              border-bottom: 1px solid #DDD;
              padding-bottom: 10px;
              transition: all 600ms;
            }

            .des {
              color: #111;
              font-size: $fontSize_22;
              margin: 0.8vw 0;
            }

            .dt {
              display: flex;
              align-items: center;
              justify-content: space-between;

              .time {
                color: #666;
                font-size: $fontSize_22;
              }

              .btn {
                background-color: rgba(224, 28, 28, 1);
                width: fit-content;
                padding: 0.4vw 1.6vw;
                border-radius: 30px;

                svg {
                  display: block;
                  transition: all 600ms;
                }
              }
            }

            &:hover {
              .pic {
                img {
                  transform: scale(1.05);
                }
              }

              .st {
                color: rgba(224, 28, 28, 1);
              }

              .dt {
                .btn {
                  svg {
                    transform: translateX(10px);
                  }
                }
              }
            }
          }
        }
      }
    }
  }


  @media screen and (max-width: 1024px) {
    padding-top: 70px;

    .section {
      padding: 40px 0;

      .search {
        width: 90%;

        input {
          width: 70%;
          font-size: 16px;
          height: 45px;
          padding-left: 15px;

          &::placeholder {
            font-size: 16px;
          }
        }

        a {
          width: 30%;
          height: 45px;
        }
      }

      .content {
        .t {
          margin: 40px 0 15px 0;
          font-size: 24px;
        }

        .tabs {
          .item {
            font-size: 16px;
            padding-bottom: 5px;
            margin: 0 35px;

            &::after {
              height: 2px;
            }
          }
        }

        .boxes {
          .pros {
            grid-template-columns: repeat(1, 1fr);
            gap: 20px;
            width: 90%;
            margin: 30px auto;
            .item {
              height: auto;
              border-radius: 20px;

              .img {
                width: 100%;
              }

              &::after {
                height: 40%;
              }

              &::before {
                height: 40%;
              }

              .position {
                left: 5%;
                bottom: 20px;

                h1 {
                  font-size: 24px;
                  line-height: 1;
                  margin: 0 0 15px;
                }

                .lable {
                  border-radius: 5px;
                  padding: 5px 10px;
                  height: auto;
                  margin: 0 0 5px;
                  font-size: 14px;
                }

                .pick p {
                  font-size: 16px;
                  line-height: 2;
                }
              }
            }
          }
          .news{
            grid-template-columns: repeat(1, 1fr);
            gap: 20px;
            width: 90%;
            margin: 30px auto;
            a{
              width: 100%;
              margin-left: 0;
              margin-bottom: 30px;
              .tag{
                font-size: 16px;
                margin: 10px 0;
              }
              .st{
                font-size: 18px;
              }
              .des{
                font-size: 14px;
                margin: 10px 0;
              }
              .dt{
                .time{
                  font-size: 14px;
                }
                .btn{
                  padding: 5px 25px;
                }
              }
            }
          }
        }
      }
    }

  }

}